<template>
  <div id="area">
    <div class="area">
      <div class="sx">
        <div class="pos">
          <div class="title">
            1435<span>
              <el-icon>
                <SortUp />
              </el-icon>
            </span>
          </div>
          <div class="ud">+9%</div>
          <div class="iconT">
            <Promotion class="iconI"></Promotion>
            <div>产品数量</div>
          </div>
        </div>
      </div>
      <div id="areaChart2"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, markRaw } from "vue";
import * as echarts from "echarts";
let areaChart2 = ref(); //定义元素
onMounted(() => {
  // 绘制图表
  areaChart2.value = markRaw(
    echarts.init(document.querySelector("#areaChart2") as HTMLElement)
  );
  areaChart2.value.setOption({
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
        borderWidth: 0,
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(0,0,255,0.2)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(0,178,255,0.5)", // 100% 处的颜色
          },
        ],
        // global: false, // 缺省为 false
      },
      show: true,
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 0,
        },
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        areaStyle: {
          opacity: 0.7,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            
            {
              offset: 0,
              color: "rgba(0,178,255,0.7)",
            },{
              offset: 1,
              color: "rgba(0,0,255,0.7)",
            },
            
          ]),
        },
      },
    ],
  });

  window.addEventListener("resize", function () {
    areaChart2.value.resize();
  });
});
</script>

<style lang="less" scoped>
#area {
  width: 100%;
  height: 100%;
  .area {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    .sx {
      position: absolute;
      z-index: 3;
      width: 62%;
      height: 50%;
      .pos {
        width: 100%;
        height: 70%;
        .title {
          width: 90%;
          text-align: right;
          margin: 0 auto;
          color: aqua;
          font-size: 42px;
          font-weight: lighter;
          margin-top: 15%;
          span {
            color: red;
          }
        }

        .ud {
          width: 50%;
          margin: 0 auto;
          text-align: right;
          font-size: 16px;
          color: red;
        }
        .iconT{
          width: 60%;
          .iconI{
           width: 35%;
          }
          div{
            margin: 0 auto;
          }
          font-size: 12px;
          text-align: center;
        color: white;
        
        }
      }
    }
    #areaChart2 {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
